<template lang="html">
  <div class="container-with-aside fade-transition">
    <nav-aside></nav-aside>
    <div class="tile is-parent">
      <article class="tile is-child box">
        <h1 class="title">商户交易查询</h1>
        <div class="">
          请选择时间:<datepicker :time.sync="time" :limit="limit" ></datepicker>
        </div>
        <table class="table is-striped">
          <thead>
            <tr>
              <th>商户名称</th>
              <th>商户PID</th>
              <th>当日交易金额</th>
              <th>当日交易笔数</th>
              <th>7日交易金额</th>
              <th>7日交易笔数</th>
              <th>30日交易金额</th>
              <th>30日交易笔数</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in trdList">
              <td>{{ item.merchant_name }}</td>
              <td>{{ item.merchant_pid }}</td>
              <td>{{ item.trd_amt_1d | changeMoney}}</td>
              <td>{{ item.trd_cnt_1d }}</td>
              <td>{{ item.trd_amt_7d | changeMoney}}</td>
              <td>{{ item.trd_cnt_7d }}</td>
              <td>{{ item.trd_amt_30d | changeMoney}}</td>
              <td>{{ item.trd_cnt_30d }}</td>
            </tr>
          </tbody>
        </table>
      </article>
    </div>
  </div>
</template>

<script>
import NavAside from '../Common/NavAside.vue'
import {getTrdOneList} from '../../vuex/actions/trd'
import {trdList} from '../../vuex/getters/trd'
import {user} from '../../vuex/getters/token'
import datepicker from 'vue-datepicker/vue-datepicker-1.vue'
export default {
  data(){
    return{
      time: ""
    }
  },
  route:{
    data(){
      // this.getTrdOneList(this.user.operatorId);
    }
  },
  watch: {
    time(value) {
      this.getTrdOneList(this.user.operatorId,value);
    }
  },
  vuex: {
    getters: {
      trdList,
      user
    },
    actions:{
      getTrdOneList
    }
  },
  computed: {},
  mounted () {},
  methods: {},
  components: {
    NavAside,
    datepicker
  }
}
</script>

<style lang="css">
</style>
